<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <!-- 页面标题 -->
    <view class="flex items-center justify-between mb-[40rpx]">
      <text class="text-[48rpx] font-extrabold text-blue-600 drop-shadow">既往病史</text>
      <nut-button type="primary" class="h-[80rpx] px-[32rpx] rounded-[16rpx] text-[28rpx] font-bold bg-blue-500 hover:bg-blue-600" @click="goAdd">新增</nut-button>
    </view>

    <!-- 搜索栏 -->
    <view class="bg-white rounded-[24rpx] p-[24rpx] mb-[32rpx] shadow-sm">
      <view class="flex gap-[16rpx]">
        <nut-input
          v-model="searchForm.name"
          placeholder="搜索姓名"
          class="flex-1 px-[24rpx] py-[16rpx] bg-gray-50 rounded-[12rpx] border border-gray-200 text-[28rpx]"
        />
        <nut-button type="primary" class="h-[80rpx] px-[24rpx] rounded-[12rpx] text-[28rpx] bg-blue-500" @click="searchRecords">搜索</nut-button>
      </view>
    </view>

    <!-- 列表内容 -->
    <view v-if="loading" class="flex justify-center items-center py-[100rpx]">
      <text class="text-[32rpx] text-gray-500">加载中...</text>
    </view>

    <view v-else-if="records.length === 0" class="flex flex-col justify-center items-center py-[100rpx]">
      <text class="text-[56rpx] mb-[16rpx]">📋</text>
      <text class="text-[32rpx] text-gray-500 mb-[32rpx]">暂无既往病史记录</text>
      <nut-button type="primary" class="h-[80rpx] px-[48rpx] rounded-[16rpx] text-[28rpx] font-bold bg-blue-500" @click="goAdd">添加第一条</nut-button>
    </view>

    <view v-else class="space-y-[24rpx]">
      <view
        v-for="record in records"
        :key="record.id"
        class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm border border-gray-100 cursor-pointer transition-all hover:shadow-md active:scale-[0.98]"
        @click="goView(record.id)"
      >
        <view class="flex items-center justify-between mb-[16rpx]">
          <view class="flex items-center">
            <view class="w-[80rpx] h-[80rpx] bg-blue-100 rounded-[20rpx] flex items-center justify-center mr-[24rpx]">
              <text class="text-[40rpx]">📋</text>
            </view>
            <view>
              <text class="block text-[36rpx] font-bold text-gray-800 mb-[8rpx]">{{ record.name }}</text>
              <text class="text-[24rpx] text-gray-500">{{ record.idNumber }}</text>
            </view>
          </view>
          <view class="flex items-center gap-[16rpx]">
            <text class="text-[24rpx] text-gray-400">档案ID: {{ record.recordid }}</text>
            <text class="text-[32rpx] text-blue-500">›</text>
          </view>
        </view>
        
        <view class="flex flex-wrap gap-[16rpx]">
          <view v-if="record.ifDisease === 1" class="px-[16rpx] py-[8rpx] bg-red-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-red-700">疾病史</text>
          </view>
          <view v-if="record.ifFamDis === 1" class="px-[16rpx] py-[8rpx] bg-orange-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-orange-700">家族病史</text>
          </view>
          <view v-if="record.ifGeneticDis === 1" class="px-[16rpx] py-[8rpx] bg-purple-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-purple-700">遗传病史</text>
          </view>
          <view v-if="record.ifOpera === 1" class="px-[16rpx] py-[8rpx] bg-yellow-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-yellow-700">手术史</text>
          </view>
          <view v-if="record.ifTrauma === 1" class="px-[16rpx] py-[8rpx] bg-green-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-green-700">外伤史</text>
          </view>
          <view v-if="record.ifInbloob === 1" class="px-[16rpx] py-[8rpx] bg-pink-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-pink-700">输血史</text>
          </view>
          <view v-if="record.allergy === 1" class="px-[16rpx] py-[8rpx] bg-indigo-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-indigo-700">过敏史</text>
          </view>
          <view v-if="record.expose === 1" class="px-[16rpx] py-[8rpx] bg-teal-100 rounded-[12rpx]">
            <text class="text-[24rpx] text-teal-700">暴露史</text>
          </view>
        </view>

        <view v-if="record.note" class="mt-[16rpx] pt-[16rpx] border-t border-gray-100">
          <text class="text-[26rpx] text-gray-600">📝 {{ record.note }}</text>
        </view>
      </view>
    </view>

    <!-- 分页 -->
    <view v-if="total > pageSize" class="mt-[48rpx] flex justify-center">
      <nut-pagination
        v-model="currentPage"
        :total="total"
        :page-size="pageSize"
        @change="onPageChange"
        class="text-[28rpx]"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { request } from '@/service/request'

const loading = ref(false)
const records = ref<any[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const searchForm = reactive({
  name: '',
  idNumber: ''
})

onMounted(() => {
  loadRecords()
})

async function loadRecords() {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      ...searchForm
    }
    
    const result = await request.get<any>('/medical/medicalHistory/list', params, {
      useErrMsg: true
    })
    
    if (result) {
      records.value = result.records || result.list || []
      total.value = result.total || 0
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    Taro.showToast({ title: '加载数据失败', icon: 'error' })
  } finally {
    loading.value = false
  }
}

function searchRecords() {
  currentPage.value = 1
  loadRecords()
}

function onPageChange(page: number) {
  currentPage.value = page
  loadRecords()
}

function goAdd() {
  Taro.navigateTo({
    url: '/pages/info/medical-history/add'
  })
}

function goView(id: string) {
  Taro.navigateTo({
    url: `/pages/info/medical-history/view?id=${id}`
  })
}
</script> 